﻿@model ProductViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var theme = "DevEx";
}
@Scripts.Render("~/Scripts/Product/addProduct.js")
@using (Html.BeginForm("AddProduct", "Product", FormMethod.Post))
{
    <div class="container-fluid" style="margin-top: 15px;">
        <!-- Page Header -->
        <div class="page-header page-header-block">
            <div class="page-header-section">
                <h4 class="title semibold">
                    PRODUCTS</h4>
            </div>
        </div>
        <!-- Page Header -->
        <div class="row">
            <div class="col-md-12">
                <!-- START panel -->
                <div class="panel panel-default">
                    <!-- panel heading/header -->
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            General</h3>
                    </div>
                    <!--/ panel heading/header -->
                    <!-- panel body -->
                    <div class="panel-body">
                        @Html.HiddenFor(model => model.ProductID)
                        <table width="100%">
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.CategoryID).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.DevExpress().ComboBoxFor(model => model.CategoryID, settings =>
                               {
                                   settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                                   settings.Properties.TextField = "Value";
                                   settings.Properties.ValueField = "Key";
                                   settings.Properties.ValueType = typeof(Guid);
                                   settings.Properties.ClientSideEvents.Init = "function(s,e){cbbParentID=s;}";
                                   settings.Height = 30;
                                   settings.Width = 200;
                                   settings.Enabled = true;
                               }).BindList(ThinhTien.Common.LookupData.Category).Bind(Model.ID).GetHtml()
                                </td>
                            </tr>
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.Name).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.DevExpress().TextBoxFor(model => model.Name, settings =>
                               {
                                   settings.ShowModelErrors = true;
                                   settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                                   settings.Height = 30;
                               }).GetHtml()
                                </td>
                            </tr>
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.Description).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.DevExpress().MemoFor(model => model.Description, settings =>
                               {
                                   settings.ShowModelErrors = true;
                                   settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                                   settings.Height = 100;
                               }).GetHtml()
                                </td>
                            </tr>
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.DescriptionDetail).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.Partial("Partials/DesciptionDetailPartial")
                                </td>
                            </tr>
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.ProductImages).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.DevExpress().UploadControl(
                                settings =>
                                {
                                    settings.Name = "ucMultiFiles";
                                    settings.AddUploadButtonsHorizontalPosition = AddUploadButtonsHorizontalPosition.Left;
                                    settings.FileInputCount = 1;
                                    settings.ShowAddRemoveButtons = true;
                                }).GetHtml()
                                </td>
                            </tr>
                            @if (Model.ProductImages != null)
                            {
                                <tr>
                                    <td class="td-form-table">
                                        @Html.DevExpress().LabelFor(model => model.ProductImages).GetHtml()
                                    </td>
                                    <td class="td-form-table">
                                        <table cellspacing="0" cellpadding="0" style="width: 100%; border-collapse: collapse;
                                            border-collapse: separate; border-width: 1px; border-style: solid;">
                                            <tbody>
                                                <tr>
                                                    <td class="dxgvHeader_@theme" style="border-top-width:0px;border-left-width:0px;width:1px;">
                                                        No
                                                    </td>
                                                    <td class="dxgvHeader_@theme" style="border-top-width:0px;border-left-width:0px;width:1px;">
                                                        Image
                                                    </td>
                                                    <td class="dxgvHeader_@theme" style="border-top-width:0px;border-left-width:0px;">
                                                        Filename
                                                    </td>
                                                    <td class="dxgvHeader_@theme" style="border-top-width:0px;border-left-width:0px;">
                                                        Size
                                                    </td>
                                                    <td class="dxgvHeader_@theme" style="border-top-width:0px;border-left-width:0px;border-right-width:0px;width:1px;text-align:center;">
                                                        Action
                                                    </td>
                                                </tr>
                                                @for (int i = 0; i < Model.ProductImages.Count; i++) {
                                                <tr class="dxgvDataRow_@theme" id="@Model.ProductImages[i].ID">
                                                    <td class="dxgv">
                                                        @(i + 1)
                                                        <input type="hidden" name="ProductImages[@i].IsDeleted" id="hidden_@Model.ProductImages[i].ID"/>
                                                        <input type="hidden" name="ProductImages[@i].ID" value="@Model.ProductImages[i].ID"/>
                                                    </td>
                                                    <td class="dxgv">
                                                        @{
                                                            var base64 = Convert.ToBase64String(Model.ProductImages[i].FileData);
                                                            var imgSrc = String.Format("data:image/gif;base64,{0}", base64);
                                                        }
                                                        <img src="@imgSrc" style="width:100px;" />
                                                    </td>
                                                    <td class="dxgv">
                                                        @Model.ProductImages[i].Filename
                                                    </td>
                                                    <td class="dxgv">
                                                        @Model.ProductImages[i].FileSize KB
                                                    </td>
                                                    <td class="dxgv" style="border-right-width: 0px;">
                                                        <button type="button" class="btn btn-danger" onclick="DeleteImage('@Model.ProductImages[i].ID');">
                                                            Delete</button>
                                                    </td>
                                                </tr>
                                                }
                                            </tbody>
                                        </table>
                                    </td>
                                </tr>
                            }
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.Price).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.DevExpress().TextBoxFor(model => model.Price, settings =>
                               {
                                   settings.ShowModelErrors = true;
                                   settings.Width = 200;
                                   settings.Height = 30;
                                   settings.Properties.DisplayFormatString = "#,0 VND";
                               }).GetHtml()
                                </td>
                            </tr>
                            <tr>
                                <td class="td-form-table">
                                    @Html.DevExpress().LabelFor(model => model.Warranty).GetHtml()
                                </td>
                                <td class="td-form-table">
                                    @Html.DevExpress().ComboBoxFor(model => model.Warranty, settings =>
                               {
                                   settings.Width = 200;
                                   settings.Height = 30;
                                   settings.Properties.ValueField = "Key";
                                   settings.Properties.TextField = "Value";
                                   settings.Properties.ValueType = typeof(int);
                               }).BindList(ThinhTien.Common.LookupData.Waranties).Bind(Model.Warranty).GetHtml()
                                </td>
                            </tr>
                        </table>
                        <div class="panel-footer">
                            <div class="form-group no-border">
                                <div class="col-sm-9">
                                    <button type="submit" class="btn btn-primary">
                                        Submit button</button>
                                    <button type="reset" class="btn btn-danger">
                                        Reset button</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- panel body -->
                </div>
                <!--/ END form panel -->
            </div>
        </div>
    </div>
}
